/** 页面元素 **/
.#{$dgg}-btn, .#{$dgg}-input, .#{$dgg}-textarea, .#{$dgg}-upload-button, .#{$dgg}-select{outline: none; -webkit-appearance: none; transition: all .3s; -webkit-transition: all .3s; box-sizing: border-box;}

/* 引用 */.#{$dgg}-elem-quote{margin-bottom: 10px; padding: 15px; line-height: 22px; border-left: 5px solid #009688; border-radius: 0 2px 2px 0; background-color: $gray-910;}
.#{$dgg}-quote-nm{border-style: solid; border-width: 1px; border-left-width: 5px; background: none;}
/* 字段集合 */.#{$dgg}-elem-field{margin-bottom: 10px; padding: 0; border-width: 1px; border-style: solid;}
.#{$dgg}-elem-field legend{margin-left: 20px; padding: 0 10px; font-size: 20px; font-weight: 300;}
.#{$dgg}-field-title{margin: 10px 0 20px; border-width: 0; border-top-width: 1px;}
.#{$dgg}-field-box{padding: 10px 15px;}
.#{$dgg}-field-title .#{$dgg}-field-box{padding: 10px 0;}

/* 进度条 */
.#{$dgg}-progress{position: relative; height: 6px; border-radius: 20px; background-color: $gray-800;}
.#{$dgg}-progress-bar{position: absolute; left: 0; top: 0; width: 0; max-width: 100%; height: 6px; border-radius: 20px; text-align: right; background-color: $green-100; transition: all .3s; -webkit-transition: all .3s;}
.#{$dgg}-progress-big,
.#{$dgg}-progress-big .#{$dgg}-progress-bar{height: 18px; line-height: 18px;}
.#{$dgg}-progress-text{position: relative; top: -20px; line-height: 18px; font-size: 12px; color: $gray-300}
.#{$dgg}-progress-big .#{$dgg}-progress-text{position: static; padding: 0 10px; color: $white;}
/*

  面板

*/


/* 折叠面板 */
.#{$dgg}-collapse{border-width: 1px; border-style: solid; border-radius: 2px;}
.#{$dgg}-colla-item,
.#{$dgg}-colla-content{border-top-width: 1px; border-top-style: solid;}
.#{$dgg}-colla-item:first-child{border-top: none;}
.#{$dgg}-colla-title{position: relative; height: 42px; line-height: 42px; padding: 0 15px 0 35px; color: $gray-100; background-color: $gray-910; cursor: pointer; font-size: 14px; overflow: hidden;}
.#{$dgg}-colla-content{display: none; padding: 10px 15px; line-height: 22px; color: $gray-300;}
.#{$dgg}-colla-icon{position: absolute; left: 15px; top: 0; font-size: 14px;}

/* 卡片面板 */
.#{$dgg}-card{margin-bottom: 15px; border-radius: 2px; background-color: $white; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);}
.#{$dgg}-card:last-child{margin-bottom: 0;}
.#{$dgg}-card-header{position: relative; height: 42px; line-height: 42px; padding: 0 15px; border-bottom: 1px solid #f6f6f6; color: $gray-100; border-radius: 2px 2px 0 0; font-size: 14px;}
.#{$dgg}-card-body{position: relative; padding: 10px 15px; line-height: 24px;}
.#{$dgg}-card-body[pad15]{padding: 15px;}
.#{$dgg}-card-body[pad20]{padding: 20px;}
.#{$dgg}-card-body .#{$dgg}-table{margin: 5px 0;}
.#{$dgg}-card .#{$dgg}-tab{margin: 0;}

/* 常规面板 */
.#{$dgg}-panel{}

/* 窗口面板 */
.#{$dgg}-panel-window{position: relative; padding: 15px; border-radius: 0; border-top: 5px solid $gray-810; background-color: $white;}

/* 其它辅助 */
.#{$dgg}-auxiliar-moving{position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background: none; z-index: 9999999999;}

/*

  默认主题

*/


/* 背景颜色 */
.#{$dgg}-bg-red{background-color: $red; color: $white;} /*赤*/
.#{$dgg}-bg-orange{background-color: $yellow; color: $white;} /*橙*/
.#{$dgg}-bg-green{background-color: #009688; color: $white;} /*绿*/
.#{$dgg}-bg-cyan{background-color: #2F4056; color: $white;} /*青*/
.#{$dgg}-bg-blue{background-color: $blue-100; color: $white;} /*蓝*/
.#{$dgg}-bg-black{background-color: $gray-110; color: $white;} /*黑*/
.#{$dgg}-bg-gray{background-color: $gray-830; color: $gray-300;} /*灰*/

/* 边框 */
.#{$dgg}-quote-nm,
.#{$dgg}-elem-field,
.#{$dgg}-collapse,
.#{$dgg}-colla-item,
.#{$dgg}-colla-content,
.#{$dgg}-badge-rim,
.#{$dgg}-tab-title,
.#{$dgg}-tab-title .#{$dgg}-this:after,
.#{$dgg}-tab-bar,
.#{$dgg}-tab-card,

.#{$dgg}-input, .#{$dgg}-textarea, .#{$dgg}-select,
.#{$dgg}-form-pane .#{$dgg}-form-label,
.#{$dgg}-form-pane .#{$dgg}-form-item[pane],
.#{$dgg}-dggedit, .#{$dgg}-dggedit-tool{border-color: $gray-810}

/* 背景边框 */
hr, .#{$dgg}-timeline-item:before{background-color: $gray-810;}
/* 新增时间轴 样式*/
.#{$dgg}-timeline {
  padding-left: 5px;
}
.#{$dgg}-timeline-item {
  position: relative;
  padding-bottom: 20px;
  &:first-child {
    &:before {
      display: block;
    }
  }
  &:last-child {
    &:before {
      display: none;
    }
  }
  &:before {
    content: '';
    position: absolute;
    left: 5px;
    top: 0;
    z-index: 0;
    width: 1px;
    height: 100%;
  }
}
.#{$dgg}-timeline-axis {
  position: absolute;
  left: -5px;
  top: 0;
  z-index: 10;
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-color: #fff;
  color: #5FB878;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
}
.#{$dgg}-timeline-content {
  padding-left: 25px;
}
.#{$dgg}-text {
  line-height: 22px;
  font-size: 14px;
  color: #666;
}
.#{$dgg}-text h3 {

}
/* 文本区域 */
.#{$dgg}-text{line-height: 22px; font-size: 14px; color: $gray-300;}
.#{$dgg}-text h1,
.#{$dgg}-text h2,
.#{$dgg}-text h3{font-weight: 500; color: $gray-100;}
.#{$dgg}-text h1{font-size: 30px;}
.#{$dgg}-text h2{font-size: 24px;}
.#{$dgg}-text h3{font-size: 18px;}
.#{$dgg}-text a:not(.#{$dgg}-btn){color: #01AAED;}
.#{$dgg}-text a:not(.#{$dgg}-btn):hover{text-decoration: underline;}
.#{$dgg}-text ul{padding: 5px 0 5px 15px;}
.#{$dgg}-text ul li{margin-top: 5px; list-style-type: disc;}
.#{$dgg}-text em,
.#{$dgg}-word-aux{color: $gray-430 !important; padding: 0 5px !important;}

/*

  按钮

*/

.#{$dgg}-btn{display: inline-block; vertical-align: middle; height: 38px; line-height: 38px; padding: 0 18px; background-color: #009688; color: $white; white-space: nowrap; text-align: center; font-size: 14px; border: none; border-radius: 2px; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;}
.#{$dgg}-btn:hover{opacity: 0.8; filter:alpha(opacity=80); color: $white;}
.#{$dgg}-btn:active{opacity: 1; filter:alpha(opacity=100);}
.#{$dgg}-btn+.#{$dgg}-btn{margin-left: 10px;}

/* 按钮容器 */
.#{$dgg}-btn-container{font-size: 0;}
.#{$dgg}-btn-container .#{$dgg}-btn{margin-right: 10px; margin-bottom: 10px;}
.#{$dgg}-btn-container .#{$dgg}-btn+.#{$dgg}-btn{margin-left: 0;}
.#{$dgg}-table .#{$dgg}-btn-container .#{$dgg}-btn{margin-bottom: 9px;}


/* 圆角 */.#{$dgg}-btn-radius{border-radius: 100px;}
.#{$dgg}-btn .#{$dgg}-icon{margin-right: 3px; font-size: 18px; vertical-align: bottom; vertical-align: middle\0;}

/* 原始 */.#{$dgg}-btn-primary{border: 1px solid $gray-610; background-color: $white; color: $gray-210;}
.#{$dgg}-btn-primary:hover{border-color: #009688; color: $gray-100}

/* 百搭 */.#{$dgg}-btn-normal{background-color: $blue-100;}
/* 暖色 */.#{$dgg}-btn-warm{background-color: $yellow;}
/* 警告 */.#{$dgg}-btn-danger{background-color: $red;}
/* 禁用 */.#{$dgg}-btn-disabled,.#{$dgg}-btn-disabled:hover,.#{$dgg}-btn-disabled:active{border: 1px solid $gray-810; background-color: $gray-920; color: $gray-610; cursor: not-allowed; opacity: 1;}

/* 大型 */.#{$dgg}-btn-lg{height: 44px; line-height: 44px; padding: 0 25px; font-size: 16px;}
/* 小型 */.#{$dgg}-btn-sm{height: 30px; line-height: 30px; padding: 0 10px; font-size: 12px;}
.#{$dgg}-btn-sm i{font-size: 16px !important;}
/* 超小 */.#{$dgg}-btn-xs{height: 22px; line-height: 22px; padding: 0 5px; font-size: 12px;}
.#{$dgg}-btn-xs i{font-size: 14px !important;}
/* 按钮组 */.#{$dgg}-btn-group{display: inline-block; vertical-align: middle; font-size: 0;}
.#{$dgg}-btn-group .#{$dgg}-btn{margin-left: 0!important; margin-right: 0!important; border-left: 1px solid rgba(255,255,255,.5); border-radius: 0;}
.#{$dgg}-btn-group .#{$dgg}-btn-primary{border-left: none;}
.#{$dgg}-btn-group .#{$dgg}-btn-primary:hover{border-color: $gray-610; color: #009688;}
.#{$dgg}-btn-group .#{$dgg}-btn:first-child{border-left: none; border-radius: 2px 0 0 2px;}
.#{$dgg}-btn-group .#{$dgg}-btn-primary:first-child{border-left: 1px solid $gray-610;}
.#{$dgg}-btn-group .#{$dgg}-btn:last-child{border-radius: 0 2px 2px 0;}
.#{$dgg}-btn-group .#{$dgg}-btn+.#{$dgg}-btn{margin-left: 0;}
.#{$dgg}-btn-group+.#{$dgg}-btn-group{margin-left: 10px;}
/* 流体 */
.#{$dgg}-btn-fluid{width: 100%;}

/* 小徽章 */
.#{$dgg}-badge,
.#{$dgg}-badge-dot,
.#{$dgg}-badge-rim{position:relative; display: inline-block; padding: 0 6px; font-size: 12px; text-align: center; background-color: $red; color: $white; border-radius: 2px;}
.#{$dgg}-badge{height: 18px; line-height: 18px;}
.#{$dgg}-badge-dot{width: 8px; height: 8px; padding: 0; border-radius: 50%;}
.#{$dgg}-badge-rim{height: 18px; line-height: 18px; border-width: 1px; border-style: solid; background-color: $white; color: $gray-300;}

.#{$dgg}-btn .#{$dgg}-badge,
.#{$dgg}-btn .#{$dgg}-badge-dot{margin-left: 5px;}
.#{$dgg}-nav .#{$dgg}-badge,
.#{$dgg}-nav .#{$dgg}-badge-dot{position: absolute; top: 50%; margin: -8px 6px 0;}
.#{$dgg}-tab-title .#{$dgg}-badge,
.#{$dgg}-tab-title .#{$dgg}-badge-dot{left: 5px; top: -2px;}



//  dggui-textarea  限制字符串
.#{$dgg}-element-text-max{
  position:relative;
  .#{$dgg}-element-result{
    text-align: right;
    padding: 2px;
    color: #ccc;
    }
  }
